<template>
  <!-- 常驻 -->
  <title-bar />
  <div class="fill-title-bar"></div>
  <div id="main-content" :style="mainContentStyle">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

// 在打开dev tools时右上角在调节窗口大小时会显示一会儿，关闭后不会显示
<script lang="ts">
import { ipcRenderer, IpcRendererEvent } from 'electron'
import { defineComponent } from 'vue'
import TitleBar from './components/title-bar.vue'
export default defineComponent({
  components: { TitleBar },
  data() {
    return {
      titleBarHeight: 27,
      mainContentStyle: {
        height: '100%'
      }
    }
  },
  created() {
    console.log('app created')
    this.init()
  },
  methods: {
    init() {
      // 设置mainContentStyle
      this.mainContentStyle.height =
        (ipcRenderer.sendSync('getContentSize') as number[])[1] -
        this.titleBarHeight +
        'px'
      // 监听窗口大小变化，调节 mainContentStyle
      ipcRenderer.on('windowResize', (event: IpcRendererEvent, arg) => {
        console.log(arg)
        this.mainContentStyle.height =
          (arg as number[])[1] - this.titleBarHeight + 'px'
      })
    }
  }
})
</script>

<style lang="stylus">
#app
  text-align center
  background-color white
  height 100%
  >div.fill-title-bar
    height 27px
#main-content
  overflow auto
  height 100%
  &::-webkit-scrollbar
    background-color #F1F1F1
    width 12px
    height 12px
    /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb
    background-color #C1C1C1
    border-radius 8px
    &:hover
      background-color #aaaaaa

html
  height 100%
  body
    height 100%
    // 隐藏滚动条
    &::-webkit-scrollbar
      width 0
      height 0
</style>
